﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%request.setAttribute("path", request.getContextPath());%>
<!doctype html>
<html class="no-js" lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>购物结算-青鸟优选</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
        <!-- Place favicon.ico in the root directory -->

		<!-- CSS here -->
        <link rel="icon" href="${path}/jbs/images/ico.ico" type="image/x-icon">
        <link rel="stylesheet" href="${path}/assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="${path}/assets/css/animate.min.css">
        <link rel="stylesheet" href="${path}/assets/css/magnific-popup.css">
        <link rel="stylesheet" href="${path}/assets/css/fontawesome-all.min.css">
        <link rel="stylesheet" href="${path}/assets/css/jquery-ui.css">
        <link rel="stylesheet" href="${path}/assets/css/flaticon.css">
        <link rel="stylesheet" href="${path}/assets/css/aos.css">
        <link rel="stylesheet" href="${path}/assets/css/slick.css">
        <link rel="stylesheet" href="${path}/assets/css/default.css">
        <link rel="stylesheet" href="${path}/assets/css/style.css">
        <link rel="stylesheet" href="${path}/assets/css/responsive.css">
    </head>
    <body>

    <!-- preloader -->
    <div id="preloader">
        <div id="loading-center">
            <div class="loader">
                <img src="${path}/assets/img/logo/ico.png" alt="">
            </div>
        </div>
    </div>
    <!-- preloader-end -->

    <!-- header-area -->
    <header class="header-style-two">
        <!-- header-area -->
        <header class="header-style-two">
            <!-- header-search-area -->
            <div class="header-search-area">
                <div class="container custom-container">
                    <div class="row align-items-center">
                        <div class="col-xl-2 col-lg-3 d-none d-lg-block">
                            <div class="logo">
                                <a href="${path}/Index"><img src="${path}/assets/img/logo/logo.png" alt="Logo"></a>
                            </div>
                        </div>
                        <div class="col-xl-10 col-lg-9">
                            <div class="d-block d-sm-flex align-items-center justify-content-end">
                                <div class="header-search-wrap">
                                    <form action="#">
                                        <input type="text" placeholder="搜索商品">
                                        <button><i class="flaticon-loupe-1"></i></button>
                                    </form>
                                </div>
                                <div class="header-action">
                                    <ul>
                                        <c:choose>
                                            <c:when test="${requestScope.userSession==null}">
                                                <li class="header-user" ><a href="${path}/Login" style="color: var(--color-primary);width: 60px;border-radius: 20px">
                                                    登录</a></li>
                                                <%--                                        <li class="header-wishlist">--%>
                                                <%--                                            <a href="#"><i class="flaticon-heart-shape-outline"></i></a>--%>
                                                <%--                                            <span class="item-count">0</span>--%>
                                                <%--                                        </li>--%>
                                                <li class="header-user"><a href="${path}/Regist" style="color: var(--color-primary);width: 60px;border-radius: 20px">
                                                    注册</a></li>
                                            </c:when>
                                            <c:otherwise>
                                                <li class="header-user">
                                                    <div class="header-cart-wrap">
                                                        <a href="${path}/User"><img src="${requestScope.userSession.pic_link}" alt="" style="width:44px;border-radius: 50px;height: 44px;object-fit: cover"></a>
                                                        <ul class="minicart" style="padding-right: 10px">
                                                            <li class="d-flex align-items-start">
                                                                <div class="cart-img">
                                                                    <img src="${requestScope.userSession.pic_link}" alt="" style="width: 90px;height: 90px;border-radius: 90px">
                                                                </div>
                                                                <div class="cart-content" style="margin-top: 15px;padding-right: 15px">
                                                                    <h4>${requestScope.userSession.loginname}</h4>
                                                                    <div class="cart-price">
                                                                        <span class="new">${requestScope.userSession.userTypeText}</span>
                                                                        <span style="margin: 0">${requestScope.userSession.phone}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="del-icon">
                                                                    <a onclick="logout()" style="cursor: pointer"><i class="far fa-sign-out-alt"></i></a>
                                                                </div>
                                                            </li>
                                                            <li class="d-flex align-items-start">
                                                                <div class="index-proPicBtns">
                                                                    <a href="${path}/User"><button>个人中心</button></a>
                                                                    <button>已买到的宝贝</button>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>
                                                <li class="header-cart-action">
                                                    <div class="header-cart-wrap">
                                                        <a href="${path}/Cart"><i class="flaticon-shopping-basket"></i></a>
                                                        <span class="item-count">2</span>
                                                        <ul class="minicart">
                                                            <li class="d-flex align-items-start">
                                                                <div class="cart-img">
                                                                    <a href="${path}/Cart"><img src="${path}/assets/img/product/cart_p01.jpg" alt=""></a>
                                                                </div>
                                                                <div class="cart-content">
                                                                    <h4><a href="Product.jsp">Organic Farm Fresh Nuts</a></h4>
                                                                    <div class="cart-price">
                                                                        <span class="new">$229.9</span>
                                                                        <span><del>$229.9</del></span>
                                                                    </div>
                                                                </div>
                                                                <div class="del-icon">
                                                                    <a href="#"><i class="far fa-trash-alt"></i></a>
                                                                </div>
                                                            </li>
                                                            <li class="d-flex align-items-start">
                                                                <div class="cart-img">
                                                                    <a href="Product.jsp"><img src="${path}/assets/img/product/cart_p02.jpg" alt=""></a>
                                                                </div>
                                                                <div class="cart-content">
                                                                    <h4><a href="Product.jsp">Organic Fresh Nuts Vanla Butter</a></h4>
                                                                    <div class="cart-price">
                                                                        <span class="new">$229.9</span>
                                                                        <span><del>$229.9</del></span>
                                                                    </div>
                                                                </div>
                                                                <div class="del-icon">
                                                                    <a href="#"><i class="far fa-trash-alt"></i></a>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="total-price">
                                                                    <span class="f-left">Total:</span>
                                                                    <span class="f-right">$239.9</span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="checkout-link">
                                                                    <a href="Cart.jsp">Shopping Cart</a>
                                                                    <a class="black-color" href="checkout.jsp">Checkout</a>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </c:otherwise>
                                        </c:choose>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- header-search-area-end -->
        </header>
        <!-- header-area-end -->

        <div id="sticky-header" class="menu-area">
            <div class="container custom-container">
                <div class="row">
                    <div class="col-12">
                        <div class="mobile-nav-toggler"><i class="fas fa-bars"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- header-area-end -->

        <!-- main-area -->
        <main>

            <!-- breadcrumb-area -->
            <div class="breadcrumb-area breadcrumb-bg-two">
                <div class="container custom-container">
                    <div class="row">
                        <div class="col-12">
                            <div class="breadcrumb-content">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="act.jsp">Home</a></li>
                                        <li class="breadcrumb-item"><a href="act.jsp">Pages</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Checkout</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- breadcrumb-area-end -->

            <!-- checkout-area -->
            <div class="checkout-area pt-90 pb-90">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-7">
                            <div class="checkout-progress-wrap">
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <div class="checkout-progress-step">
                                    <ul>
                                        <li class="active">
                                            <div class="icon">1</div>
                                            <span>完善信息</span>
                                        </li>
                                        <li>
                                            <div class="icon">2</div>
                                            <span>支付订单</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="checkout-form-wrap">
                                    <div class="checkout-form-top">
                                        <h5 class="title">收货地址</h5>
                                    </div>
                                    <ul>
                                    <c:forEach items="${requestScope.addressList}" var="item">
                                        <li><table style="margin: 10px auto;border:#02A4d9 1px solid;width: 100%" border="0" class="peo_tab" cellspacing="0" cellpadding="0" id="addr_${item.id}">
                                            <tr>
                                                <td  rowspan="2" width="6%"><input type="radio" name="address" id="addr_${item.id}" value="${item.id}"></td>
                                                <td class="p_td" style="padding-right: 0">详细地址</td>
                                                <td colspan="3">${item.locDetail}</td>
                                            </tr>
                                            <tr>
                                                <td class="p_td" width="20%" style="padding-right: 0">联系人</td>
                                                <td width="25%">${item.contactName}</td>
                                                <td class="p_td" width="20%" style="padding-right: 0">联系电话</td>
                                                <td>${item.contactNumber}</td>
                                            </tr>
                                        </table>
                                        </li>
                                    </c:forEach>
                                        <a href="">新增地址</a>
                                        </ul>

<%--                                    <div class="building-info-wrap">--%>
<%--                                        <h5 class="title">填写地址</h5>--%>
<%--                                        <div class="row">--%>
<%--                                            <div class="col-md-6">--%>
<%--                                                <input type="text" placeholder="收货人">--%>
<%--                                            </div>--%>
<%--                                            <div class="col-md-6">--%>
<%--                                                <input type="text" placeholder="Last Name *">--%>
<%--                                            </div>--%>
<%--                                        </div>--%>
<%--                                        <input type="text" placeholder="Company Name ( optional )">--%>
<%--                                        <input type="text" placeholder="Country / Region *">--%>
<%--                                        <input type="text" placeholder="Street Address *">--%>
<%--                                        <div class="row">--%>
<%--                                            <div class="col-md-6">--%>
<%--                                                <input type="text" placeholder="Town City">--%>
<%--                                            </div>--%>
<%--                                            <div class="col-md-6">--%>
<%--                                                <input type="text" placeholder="State *">--%>
<%--                                            </div>--%>
<%--                                            <div class="col-md-6">--%>
<%--                                                <input type="text" placeholder="Postal zip">--%>
<%--                                            </div>--%>
<%--                                            <div class="col-md-6">--%>
<%--                                                <input type="text" placeholder="State *">--%>
<%--                                            </div>--%>
<%--                                        </div>--%>
<%--                                        <div class="different-address-wrap">--%>
<%--                                            <div class="custom-control custom-checkbox">--%>
<%--                                                <input type="checkbox" class="custom-control-input" id="sda">--%>
<%--                                                <label class="custom-control-label" for="sda">Ship to a Different Address?</label>--%>
<%--                                            </div>--%>
<%--                                            <div class="account-create-info">--%>
<%--                                                <a href="paymentSuccess.jsp">Create an Account <i class="fas fa-user"></i></a>--%>
<%--                                            </div>--%>
<%--                                        </div>--%>
<%--                                        <textarea name="message" id="message" placeholder="Order You Have Notes ( Optional )"></textarea>--%>
<%--                                    </div>--%>
                                </form>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="shop-cart-total order-summary-wrap">
                                <h3 class="title">订单总览
                                </h3>
                                <c:forEach items="${requestScope.cartDataList}" var="item" varStatus="i">
                                <div class="os-products-item" value="${item.dataId}" id="cart_${item.dataId}">
                                    <div class="thumb">
                                        <img src="${item.pic}" alt="">
                                    </div>
                                    <div class="content">
                                        <h6 class="title">${item.easyName}</h6>
                                        <span class="title">${item.suk}</span>
                                    </div>
                                    <div class="remove">¥<span id="price_${i.index}">${item.price}</span></div>
                                </div>
                                </c:forEach>
                                <div class="shop-cart-widget">
                                    <form action="#">
                                        <ul>
                                            <li class="sub-total"><span>商品金额</span><span id="totalPrice" style="text-align: right"></span></li>
                                            <li class="flex-column">
                                                <span>优惠</span>
                                                <div class="shop-check-wrap" style="width:100%">
                                                    <div class="discountRow custom-checkbox">
                                                        <p class="discountTextTitle">会员折扣</p>
                                                        <p class="discountTextContent">敬请期待</p>
                                                    </div>
                                                    <div class="discountRow custom-checkbox">
                                                        <p class="discountTextTitle">店铺折扣</p>
                                                        <p class="discountTextContent">敬请期待</p>

                                                    </div>
                                                </div>
                                            </li>
                                            <li class="cart-total-amount"><span>实付金额：</span> <span class="amount" id="finalPrice">$ 151.00</span></li>
                                        </ul>
                                        <a  class="btn" onclick="orderSubmit()">假装去支付</a>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- checkout-area-end -->

        </main>
        <!-- main-area-end -->


    <!-- footer-area -->
    <footer>
        <div class="copyright-wrap">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="copyright-text">
                            <p>Copyright &copy 2006-2020 武汉北启至优文化科技有限公司 版权所有 All Rights Reserved.</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="payment-accepted text-center text-md-right">
                            <img src="${path}/assets/img/images/payment_card.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- footer-area-end -->
		<!-- JS here -->
        <script src="${path}/assets/js/vendor/jquery-3.6.0.min.js"></script>
        <script src="${path}/assets/js/bootstrap.min.js"></script>
        <script src="${path}/assets/js/isotope.pkgd.min.js"></script>
        <script src="${path}/assets/js/imagesloaded.pkgd.min.js"></script>
        <script src="${path}/assets/js/jquery.magnific-popup.min.js"></script>
        <script src="${path}/assets/js/jquery.countdown.min.js"></script>
        <script src="${path}/assets/js/jquery-ui.min.js"></script>
        <script src="${path}/assets/js/slick.min.js"></script>
        <script src="${path}/assets/js/ajax-form.js"></script>
        <script src="${path}/assets/js/wow.min.js"></script>
        <script src="${path}/assets/js/aos.js"></script>
        <script src="${path}/assets/js/plugins.js"></script>
        <script src="${path}/assets/js/main.js"></script>
    <script>
        function orderSubmit(){
            if(jQuery('input:radio[name="address"]:checked').val()==null){
                alert("请您选择送货地址！")
                return;
            }
            let cart=new Array();
            let addId=0;
            jQuery("*[id^='cart_']").each(function(index,item){
                cart.push((item.id).substr((item.id).indexOf("_")+1));
            })
            var radio = document.getElementsByName("address");
            for (let i = 0; i < radio.length; i++) {
                if(radio[i].checked){
                    addId=radio[i].value;
                }
            }
            window.location.href="${path}/PlaceOrder?cart="+cart+"&addr="+addId;
        }

        window.onload=function (){
            checkPriceAll();
        }
            function checkPriceAll(){
            var set=jQuery("*[id^='price_']");
            var totalPrice= document.getElementById("totalPrice");
            var finalPrice=document.getElementById("finalPrice");
            var total =parseFloat(parseFloat("0").toFixed(2));
            set.each(function (index,item){
            total=total+parseFloat(parseFloat(item.textContent).toFixed(2));
        }
            )
            totalPrice.innerHTML= "¥"+total.toFixed(2);
            finalPrice.innerHTML="¥"+total.toFixed(2);
        }
    </script>
    </body>
</html>
